Tabel dengan fitur berjalan dari atas ke bawah atau dari bawah ke atas seringkali kita jumpai dimana mana seperti papan informasi kantor, bandara, bank, dan lain-lain. Sebagai pengembang web atau aplikasi tentu kita memerlukan trik seperti ini bukan ? nah berikut adalah script yang bisa anda gunakan untuk membuat sebuah tabel tampil berjalan dari baris bawah ke atas atau sebaliknya. berikut adalah script nya :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <html><head><title>Membuat tabel berjalan</title><style>.table-responsive{ height:180px; width:50%; overflow-y: auto; border:2px solid #444;}.table-responsive:hover{border-color:red;} table{width:100%;}td{padding:24px; background:#eee;}</style><script>var $el = $(".table-responsive");function anim() { var st = $el.scrollTop(); var sb = $el.prop("scrollHeight")-$el.innerHeight(); $el.animate({scrollTop: st<sb/2 ? sb : 0}, 4000, anim);}function stop(){ $el.stop();}anim();$el.hover(stop, anim);</script></head><body><div class="table-responsive"> <table class="table table-bordered table-hover"> <thead> <tr><th>No</th><th>Nama</th></tr> </thead> <tbody> <tr><td>1</td><td>Alex Mahandari</td></tr> <tr><td>2</td><td>Imam Munandar</td></tr> <tr><td>3</td><td>Oman</td></tr> <tr><td>4</td><td>Rifki Azhar</td></tr> <tr><td>5</td><td>Kusuma Atmaja</td></tr> <tr><td>6</td><td>Ayu Wulansari</td></tr> <tr><td>7</td><td>Yeyen Martini</td></tr> <tr><td>8</td><td>Toim</td></tr> <tr><td>9</td><td>Candra Daniel</td></tr> <tr><td>10</td><td>Wisnu Gunawan</td></tr> </tbody> </table></div></body></html> |
Maka outputnya adalah seperti gambar berikut :
Silahkan Lihat Demo Di sini
Untuk tabel berjalan jenis kedua dapat anda cek pada artikel saya selanjutnya yaitu :
Membuat Tabel Berjalan HTML, PHP, JAVASCRIPT PART 2
Selamat mencoba ! terimakasih. Jika membutuhkan sistem informasi atau ingin melakukan pemesanan sistem atau sekedar bertanya silahkan hubungi kontak berikut :
